<template>
	<view class="bg">
		<view class="detailTitle">
			<view class="bgView" @click="goShopCar(Bg.Id)">
				<image class="image" :src="Bg.ShopLogo" mode="aspectFill"></image>
			</view>
			<view class="TitleName">
				<text>{{Bg.ShopName}}</text>
<!-- 				<view class="phone" @tap="callNumber()">
					<uni-icons style="margin-left: 2rpx;" color="#FFFFFF" type="phone-filled" size="14"></uni-icons>
					{{Bg.Mobile}}
				</view> -->
				<!-- <view class="shopCar" @click="goShopCar(Bg.Id)">
					 查看执照
				 </view> -->
			</view>
			<view v-if="statue==false" class="collect" @click="getEva()">
				<uni-icons style="margin-right: 10rpx;" color="#FFFFFF" type="star-filled" size="15"></uni-icons> 收藏
			</view>
			<view v-else class="collect" style="color:#a7ead7 ;" @click="getEvaNo()">
				<uni-icons style="margin-right: 10rpx;" type="star-filled" size="15"
					color="#a7ead7!important"></uni-icons> 已收藏
			</view>
		</view>

		<view class="top">
			<swiper class="carousel" circular @change="swiperChange" circular indicator-dots
				indicator-color="rgba(1, 1, 1, .3)" indicator-active-color="#fff">
				<swiper-item v-for="(item,index) in topBaner" :key="index">
					<image @click="goGoodsDetail(item)" style="width: 100%;height: 100%;" :src="item"
						mode="aspectFill" />
				</swiper-item>
			</swiper>
			<view class="indicator">
				<view class="dots" v-for="(swiper, index) in topBaner" :class="[topBaner >= index ? 'on' : '']"
					:key="index"></view>
			</view>
		</view>
		<view class="cell-list-wapper">
			<uni-list class="uni-list">
				<uni-list-item style="border-bottom: 2rpx" showArrow clickable @click="handleShowLocation">
					<template v-slot:body>
						<view class="itemLine">
							<image mode="widthFix" src="../../static/qxlj/dt.png"></image>
							<text class="slot-text">
								<text class="grade" v-if="Bg.Address">
									{{Bg.Address || '未知地址'}}
								</text>
								<text class="grade" v-else>
									未知地址
								</text>
							</text>
						</view>
					</template>
				</uni-list-item>

				<uni-list-item style="margin-bottom: 2rpx;">
					<template v-slot:body>
						<view class="itemLine">
							<image mode="widthFix" src="../../static/images/icon103.png"></image>
							<text class="slot-text">
								<text class="grade" v-if="Bg.BusinessHours">
									营业时间:{{Bg.BusinessHours}}
								</text>
								<text class="grade" v-else>
									营业时间:'00:00:00 - 24:00:00'
								</text>
							</text>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item style="margin-bottom: 2rpx;" v-if="Bg.Mobile!=null">
					<template v-slot:body>
						<view class="itemLine" @tap="callNumber()">
							<image mode="widthFix" src="../../static/qxlj/dh.png"></image>
							<text class="slot-text">
								<text class="grade">
									联系电话:{{Bg.Mobile}}
								</text>
							</text>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item style="margin-bottom: 2rpx;" v-if="Bg.txtSubstance!=null">
					<template v-slot:body>
						<view class="itemLine itemNote">
							<view class="" v-html="Bg.txtSubstance">
								<!-- {{Bg.txtSubstance}} -->
							</view>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script>
	import {
		getUserId,
		GetAvailableCoupons,
		getCheckCollection,
		getCancelCollection,
		getAddCollection
	} from '@/api/homePage.js'
	import {
		getGoodsList,
		getUserProductCarItemNum,
		getShopGoodsDetail,
		getShopBgDetail
	} from '@/api/mall.js'

	export default {
		components: {

		},
		data() {
			return {
				Bg: '',
				statue: '',
				allGoodsList: [],
				newGoodsList: [],
				topBaner: [],
				shopId: '',
				couponList: [{
						name: '券1',
						price: '100',
						status: '1'
					},
					{
						name: '券2',
						price: '100',
						status: '1'
					},
					{
						name: '券3',
						price: '100',
						status: '1'
					},
					{
						name: '券4',
						price: '100',
						status: '1'
					},
				],
				UserDetail: '',

			}
		},
		onLoad(e) {
			const _this = this
			this.shopId = e.id
			// _this.getUser()

			_this.getShopGoodsList()
			_this.getShopAllGoodsList()
			_this.getCheck()
			_this.getBg()

		},
		methods: {
			// 处理导航显示
			handleShowLocation(e) {
				const _this = this;
				uni.authorize({
					scope: 'scope.userLocation',
					success() {
						uni.getLocation({
							type: 'gcj02',
							success: function(res) {
								console.log('经度：' + res.longitude)
								console.log('纬度：' + res.latitude)
								wx.openLocation({
									latitude: parseFloat(res.latitude),
									longitude: parseFloat(res.longitude),
									name: _this.Bg.ShopName,
									address: _this.bAddress,
								})
							},
							fail: function(res) {
								console.log('定位失败')
							}
						})
					}
				})
			},
			callNumber() {
				// let arr=this.helpMsg.LinkUrl.split(':');
				uni.makePhoneCall({
					phoneNumber: this.Bg.Mobile,
					success: (result) => {},
					fail: () => {},
					complete: () => {}
				});
			},
			// goShopCar(id){
			// 	uni.navigateTo({
			// 		url:`shopCart?id=${id}`
			// 	})
			// },
			async getEva() {
				try {
					uni.showLoading({
						title: '操作中...'
					})
					const {
						Data
					} = await getAddCollection({
						Id: this.shopId,
						CollectionType: 1
					});

					uni.hideLoading()
					this.getCheck()

				} catch {

				}
			},
			async getEvaNo() {
				try {
					uni.showLoading({
						title: '操作中...'
					})
					const {
						Data
					} = await getCancelCollection({
						Id: this.shopId,
						CollectionType: 1
					});

					uni.hideLoading()
					this.getCheck()

				} catch {

				}
			},
			swiperChange(event) {

				this.currentSwiper = event.detail.current;
			},
			async getBg() {
				try {
					const {
						Data
					} = await getShopBgDetail({
						Id: this.shopId
					})
					console.log(Data)
					this.Bg = Data;
					this.topBaner = Data.BusinesImgList.split('|');
				} catch (e) {
					//TODO handle the exception
				}
			},
			async getShopGoodsList() {
				try {
					const {
						Data
					} = await getShopGoodsDetail({
						BusinessId: this.shopId,
						IsRecommend: 1
					})
					this.newGoodsList = Data
					// if(Data.length>3){
					// 	this.topBaner = Data.slice(0,2)
					// }else{
					// 	this.topBaner = Data
					// }
					// this.shopName = Data[0].ShopName
					console.log('999', Data)

				} catch (e) {
					//TODO handle the exception
				}
			},
			async getShopAllGoodsList() {
				try {
					const {
						Data
					} = await getShopGoodsDetail({
						BusinessId: this.shopId,
						IsRecommend: 0
					})
					this.allGoodsList = Data


				} catch (e) {
					//TODO handle the exception
				}
			},
			async getCheck() {
				try {
					uni.showLoading({
						title: '加载中...'
					})
					const {
						Data
					} = await getCheckCollection({
						Id: this.shopId,
						CollectionType: 1
					});

					this.statue = Data
					uni.hideLoading()

				} catch {

				}
			},
			goGoodsDetail(item) {
				// uni.navigateTo({
				// 	url: `/mall_subpages/goods-detail/goods-detail?id=${item.Id}&type=${item.Type}`

				// })
			},
			//获取userId
			async getUser(Type) {
				try {
					const {
						Data
					} = await getUserId({})
					console.log('!!', Data)
					this.UserDetail = Data
					this.getCoupon()

					uni.hideLoading();
					// this.goodsTypeList = this.listGroup(Data)
				} catch (e) {

				}
			},
			async getCoupon() {
				const {
					Data
				} = await GetAvailableCoupons({
					Index: 1,
					Size: 10,
					UsersId: this.UserDetail.Id,
					BusinessId: 0
				});
				console.log(555555, Data)
			}
		}
	}
</script>

<style scoped lang="scss">
	* {}

	page {
		background-color: #FFFFFF;
	}

	.bg {
		background-color: #FFFFFF;
		height: 100%;

		// padding-top: 20rpx;
		.detailTitle {
			background-color: #498FFF;
			padding: 10rpx 0rpx 0rpx 40rpx;
			width: 100%;
			display: flex;
			// align-items: center;
			// justify-content: space-between;
			// margin-top: 20rpx;
			// margin-left: 2%;
			height: 130rpx;
			// background-image: url(../../../static/images/shopNameBg.png);
			background-size: 100% 100%;

			.TitleName {
				position: absolute;
				top: 30rpx;
				left: 150rpx;
				color: #FFFFFF;
				font-weight: bold;
				font-size: 34rpx;
				z-index: 1;

				.phone {
					// width: 150rpx;
					// background-color: #eb8a3e;
					// padding: 10rpx 6rpx;
					// border-radius: 20rpx;
					display: flex;
					align-items: center;
					// justify-content: space-around;
					color: #FFFFFF;
					font-weight: 600;
					font-size: 28rpx;
					margin-top: 10rpx;
				}

				.shopCar {
					// padding: 6rpx;
					padding: 2rpx 0;
					width: 80rpx;
					text-align: center;
					font-size: 24rpx;
					background-color: #498FFF;
					margin-top: 10rpx;
					border-radius: 20rpx;
				}
			}

			.collect {
				position: absolute;
				top: 60rpx;
				right: 5%;
				color: snow;
				font-weight: bold;
				font-size: 40rpx;
				display: flex;
				align-items: center;
				height: 50rpx;
				padding: 10rpx;
				border-radius: 35rpx;
				// border: rgb(220,120,56) 4rpx solid;
				font-weight: bold;
				font-size: 26rpx;
				color: snow;
				z-index: 2;
			}

			.bgbg {
				height: 170rpx;
				width: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
			}

			.image {
				top: 10rpx;
				width: 90rpx;
				height: 90rpx;
				border-radius: 10rpx;
			}
		}

		.top {
			height: 440rpx;
			// margin-top: 40rpx;
			background-color: #F8F8F8;

			//padding: 2% 0;
			.carousel {
				height: 100%;
				width: 100%;

				.shadowView {
					width: 100%;
					padding: 10rpx 0 10rpx 10rpx;
					position: absolute;
					bottom: 0;
					background-color: rgba(56, 54, 55, .7);
					color: #E9E9E9;
					font-size: 28rpx;
				}
			}
		}

		/* 轮播图 */
		.top /deep/ .uni-swiper-dot {
			width: 20rpx;
			height: 10rpx;
			border-radius: 50rpx;
		}

		.top /deep/ .uni-swiper-dots-horizontal {
			bottom: 70rpx;

			.uni-swiper-dot {}

			.uni-swiper-dot-active {
				background-color: #498FFF !important;
			}
		}

		.goodsArea {
			padding-top: 15rpx;
			padding-bottom: 30rpx;

			//background-color: #F8F8F8;
			.title {
				font-weight: bold;
				margin-left: 3%;
			}

			.detailList {
				padding: 0 3%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.Newgoods {

					background-color: transparent;
					border-radius: 10rpx;
					width: 48.5%;
					margin-top: 20rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-start;

					image {
						width: 100%;
						height: 350rpx;
						border-radius: 10rpx;
					}

					.name {
						font-size: 30rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 100%;
						// font-weight: bold;
						color: #363636;
						margin-top: 10rpx;
						margin-bottom: 8rpx;
						margin-left: 5%;
					}

					.sub {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 100%;
						color: gray;
						font-size: 24rpx;
						margin-left: 5%;
					}

					.price {
						color: #498FFF;
						font-weight: bold;
						margin-left: 5%;
					}
				}
			}
		}


	}

	.indicator {
		position: absolute;
		bottom: 20rpx;
		left: 0;
		right: 0;
		margin: auto auto;
		background-color: rgba(255, 255, 255, 0.4);
		width: 150upx;
		height: 5upx;
		border-radius: 3upx;
		overflow: hidden;
		display: flex;

		.dots {
			width: 0upx;
			background-color: rgba(255, 255, 255, 1);
			transition: all 0.3s ease-out;

			&.on {
				width: (100%/2);
			}
		}
	}

	.cell-list-wapper {

		// margin-top: 20rpx;
		//background-color:#e9e9e9;
		.shopLine {
			width: 100%;
			height: 116rpx;
			//background-color: #F8F8F8;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 3%;

			.shopLeft {
				color: #333;
				font-weight: bold;
				display: flex;
				align-items: center;

				image {
					width: 90rpx;
					height: 90rpx;
					border-radius: 10rpx;
				}
			}

			.rightBtn {
				color: #737373;
				font-size: 24rpx;
				padding: 10rpx;
				border-radius: 10rpx;
				background-color: rgb(233, 233, 233);
				margin-right: 5%;
			}
		}

		.shopBottomLine {
			width: 100%;
			height: 4rpx;
		}

		.uni-list {

			//background-color: #e9e9e9;
			// margin-bottom: 20rpx;
			.uni-list-item {
				//background-color: #e9e9e9;
				border: none;
				// margin-bottom: 6rpx;	
			}

			// .uni-list--border-top{
			// 	background-color: #e9e9e9!important;
			// }
		}

		.itemLine {
			border: none;
			display: flex;
			align-items: center;

			image {
				width: 38rpx;

				margin-right: 20rpx;
				margin-left: 20rpx;
			}
		}
		
		.itemNote{
			padding: 0 4%;
		}
	

		.grade {
			color: #111;
			// padding-right: 20rpx;
		}

		.slot-text {
			color: #111;
		}

	}
</style>